<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <!--引用layui的css-->
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!--引用layui的js-->
<script src="layui/layui.js"></script>

<ul class="layui-nav layui-bg-blue">
    <li class="layui-nav-item"><a href="">艳蓝导航</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案<span class="layui-nav-more"></span></a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
    <span class="layui-nav-bar"></span></ul>


<div class="layui-form-item">
    <label class="layui-form-label">验证身份证</label>
    <div class="layui-input-block">
        <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">自定义验证</label>
    <div class="layui-input-inline">
        <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off"
               class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
</div>


<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>


<table class="layui-hide" id="test"></table>


<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '/demo/table/user/'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'id', title: 'ID', sort: true}
                , {field: 'username', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'sex', title: '性别', sort: true}
                , {field: 'city', title: '城市'}
                , {field: 'sign', title: '签名'}
                , {field: 'classify', title: '职业', align: 'center'} //单元格内容水平居中
                , {field: 'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居中
                , {field: 'score', title: '评分', sort: true, align: 'right'}
                , {field: 'wealth', title: '财富', sort: true, align: 'right'}
            ]]
        });
    });

</script>
</body>
</html>